/**
 +--------------------
 * touchDrag JS | 移动端拖拽
 +--------------------
 * www.flashme.cn
 * flashme@live.cn
 * 2018-1-22
 +--------------------
 {target:对象, range:{拖动范围}, touchstart:function, touchmove:function, touchend:function}
*/


var touchDrag = function (params) {
	this.nowX = 0; this.nowY = 0;
	this.newX = 0; this.newY = 0;
	this.dragEnd=false;
	this.extend(this.params, params);
	this._init();
}

touchDrag.prototype = {
	params: {
		target: document.querySelector('.drag'),
		range: { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight },
		touchstart: null,
		touchmove: null,
		touchend: null
	},
	_init: function () {
		this.target = this.params.target;
		this.thisX = this.target.offsetLeft||0;
		this.thisY = this.target.offsetTop||0;
		this.range = this.params.range;
		this.callstart = this.params.touchstart;
		this.callmove = this.params.touchmove;
		this.callend = this.params.touchend;
		var self = this;

		self.target.addEventListener('touchstart', function (ev) {
			self.touchStart(ev);
		});
		self.target.addEventListener('touchmove', function (ev) {
			self.touchMove(ev);
		});
		self.target.addEventListener('touchend', function (ev) {
			self.touchEnd(ev);
		});

	},
	touchStart: function (ev) {
		this.dragEnd=false;
		this.startX = ev.changedTouches[0].clientX;
		this.startY = ev.changedTouches[0].clientY;
		if (this.callstart) {
			this.callstart(ev);
		}
	},
	touchMove: function (ev) {
		var self = this;

		var rangeX = self.range.x;
		var rangeWidth = self.range.width;
		var rangeY = self.range.y;
		var rangeHeight = self.range.height;

		var con = this.target;
		var moving = function () {
			if(self.dragEnd){
				return;
			}
			var touchobj = ev.changedTouches[0];
			self.newX = parseInt(touchobj.clientX - self.startX + self.nowX);
			self.newY = parseInt(touchobj.clientY - self.startY + self.nowY);
			if (self.newX > rangeWidth) {
				self.newX = rangeWidth;
			} else if (self.newX < rangeX) {
				self.newX = rangeX;
			}
			if (self.newY > rangeHeight) {
				self.newY = rangeHeight;
			} else if (self.newY < rangeY) {
				self.newY = rangeY;
			}
			con.style.webkitTransform = con.style.transform = 'translate3D(' + self.newX + 'px, ' + self.newY + 'px, 0px)';

			if (self.callmove) {
				self.callmove(ev);
			}
		};
		//this.throttle(moving(), 20);
		this.frame = requestAnimationFrame(moving);//更好的渲染
	},
	touchEnd: function (ev) {
		cancelAnimationFrame(this.frame);
		this.dragEnd=true;
		this.nowX = this.newX;
		this.nowY = this.newY;
		if (this.callend) {
			this.callend(ev, {
				news: "touchEnd"
			});
		}

	},
	setRange: function (range) {
		this.extend(this.range, range);
	},
	// throttle : function(fn, delay) {
	// 	var allowSample = true;
	// 	return function(e) {
	// 		if (allowSample) {
	// 			allowSample = false;
	// 			setTimeout(function() { allowSample = true; }, delay);
	// 			fn(e);
	// 		}
	// 	};
	// },
	extend: function (a, b) {
		for (var key in b) {
			if (b.hasOwnProperty(key)) {
				a[key] = b[key];
			}
		}
		return a;
	}
}